<!DOCTYPE html>
<html>
    <style>
        body
        {
            margin: 0px;
            padding: 0px;
        }
        .image
        {
            position: fixed;
            top: 0;
            width: 100%;
        }
        .front-image
        {
            z-index: 1;
        }
        .back-image
        {
            z-index: 0;
        }
        .yiyan
        {
            position: fixed;
            bottom: 16px;
            left: 16px;
            color: white;
            z-index: 2;
            font-size: 16px;
        }
    </style>
    <body>
        <img class="image front-image" id="front-image" src="">
        <img class="image back-image" id="back-image" src="">
        <pn class="yiyan" id="yiyan"></p>
    </body>
    <script src="./js/axios.min.js"></script>
    <script>
        function sleep(ms)
        {
            var start=Date.now();
            while(Date.now()-start<ms);
        }
        front_image=document.getElementById("front-image");
        back_image=document.getElementById("back-image");
        raw_image_list=[
            "./image/background1.png",
            "./image/background2.png",
            "./image/background3.png",
            "./image/background4.png",
            "./image/background5.png",
            "./image/background6.png"
        ];
        sentence_list=[
            "诗和远方，不如家乡。",
            "在不同的遭遇里我发现你的瞬间，有种不可言说的温柔直觉。",
            "眼睛为她下着雨，心却为她打着伞，这就是爱情。",
            "真正走掉那次，关门声最小。",
            "万物初发清净明，可知此芽成何草。"
        ];
        image_list=[]
        image_id=0;
        for(var i=1;i<=6;i++)
        {
            var j=parseInt(Math.random()*(6-i+1));
            console.log(j);
            image_list.push(raw_image_list[j]);
            raw_image_list.splice(j,1);
        }
        async function update_yiyan()
        {
            var sentence;
            try
            {
                const rep=await axios.post("https://v1.hitokoto.cn/?c=a&c=b&c=d&c=e&c=j");
                sentence=rep.data.hitokoto;
            }
            catch
            {
                sentence=sentence_list[parseInt(Math.random()*sentence_list.length)];
            }
            document.getElementById("yiyan").innerText=sentence+"\n来自：一言";
        }
        async function change()
        {
            image_id=(image_id+1)%image_list.length;
            console.log(image_list);
            console.log(image_id);
            console.log(image_list[image_id]);
            back_image.src=image_list[image_id];
            var opacity=100;
            //var step=4;
            interval=setInterval(function(){
                opacity-=4;
                front_image.style.filter=`opacity(${opacity}%)`;
                console.log(front_image.style.filter);
                console.log("Attention");
                if(opacity==0)
                {
                    front_image.src=image_list[image_id];
                    front_image.style.filter=`opacity(100%)`;
                    clearInterval(interval);
                }
            },10);
        }
        front_image.src=image_list[image_id];
        update_yiyan();
        setInterval(function(){change();},300000);
        setInterval(function(){update_yiyan();},30000);
    </script>
</html>